
body {
    display: flex; /* 设置为弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直方向排列子元素 */

    background: linear-gradient(to right, #fee0a2, #f98d92, #ce65af, #8e51d3); /* 设置背景渐变色 */
}

label {
    display: block; /* 块级元素显示 */
    margin-bottom: 10px; /* 底部外边距 */
}

input[type="text"], input[type="password"] {
    width: 200px; /* 宽度 */
    padding: 5px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
}

button {
    position: relative; /* 相对定位 */
    display: inline-block; /* 行内块级元素显示 */
    width: 60px; /* 宽度 */
    height: 25px; /* 高度 */
    line-height: 5px; /* 行高 */
    text-align: center; /* 文本居中 */
    color: rgb(0, 0, 0); /* 文本颜色 */
    font-size: 12px; /* 字体大小 */
    text-decoration: none; /* 文本装饰 */
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); /* 设置背景渐变色 */
    background-size: 400%; /* 背景大小 */
    border-radius: 30px; /* 边框圆角 */
}

button:hover {
    animation: animate 8s linear infinite; /* 按钮悬停时触发动画 */
}

@keyframes animate {
    0% {
        background-position: 0 0; /* 背景位置 */
    }
    100% {
        background-position: 400% 0; /* 背景位置变化 */
    }
}

button:before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    left: -5px; /* 左边距 */
    top: -5px; /* 上边距 */
    right: -5px; /* 右边距 */
    bottom: -5px; /* 下边距 */
    z-index: -1; /* 层级 */
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); /* 设置背景渐变色 */
    background-size: 400%; /* 背景大小 */
    border-radius: 10px; /* 边框圆角 */
    opacity: 0; /* 透明度 */
    transition: all 1s; /* 过渡效果 */
}

button:hover:before {
    filter: blur(20px); /* 模糊滤镜 */
    opacity: 1; /* 透明度变化 */
}

tr, td {
    /*border: 1px solid black;*/
    padding: 10px; /* 内边距 */
}